<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>自体血液信息</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
    <style>
        .demo-table-expand {
          font-size: 0;
        }
        .demo-table-expand label {
          width: 90px;
          color: #99a9bf;
        }
      </style>
</head>
<body>

<div class="data-manage-table">
    <template>

        <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;">
            <el-form-item label="血液编号">
                <el-input v-model="pagination.bloodId" placeholder="请输入血液编号"></el-input>
            </el-form-item>

            <el-form-item label="身份证号">
                <el-input v-model="pagination.patientIdcard" clearable placeholder="请输入身份证号"></el-input>
            </el-form-item>

            <el-form-item label="血液状态">
                <el-select v-model="pagination.state" placeholder="请选择或输入血液状态" clearable filterable @blur="selectBlur"
                @clear = "selectClearState" @change="selectChangeState">
                    <el-option v-for="(item,index) in stateList" :key="index" :label="item.state" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="ABO血型">
                <el-select v-model="pagination.aboBloodType" clearable placeholder="请选择ABO血型">
                    <el-option v-for="item in aboBloodTypeList" :key="item.code" :label="item.name" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="RH血型">
                <el-select v-model="pagination.rhBloodType" clearable placeholder="请选择RH血型">
                    <el-option v-for="item in rhBloodTypeList" :key="item.code" :label="item.name" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="血液成分">
                <el-select v-model="pagination.bloodComponent" placeholder="请选择或输入血液成分" clearable filterable @blur="selectBlur"
                @clear = "selectClearComponent" @change="selectChangeComponent">
                    <el-option v-for="(item,index) in bloodComponentList" :key="item.code" :label="item.composition" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="血量">
                <el-select v-model="pagination.bloodCount" clearable placeholder="请选择血量">
                    <el-option v-for="item in bloodSizeList" :key="item.code" :label="item.size" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="血袋位置">
                <el-select v-model="pagination.bloodLocation" clearable placeholder="请选择血袋位置">
                    <el-option v-for="item in bloodLocationList" :key="item.code" :label="item.location" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="有效时间">
                <el-date-picker v-model="pagination.dateVal" type="daterange" size="small" format="yyyy-MM-dd"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                @change="dateFormat">
                </el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="getByQueryPage(1)">搜索</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="info" @click="getByQueryPage()">重置</el-button>
            </el-form-item>

            <el-for-item>
                <el-button type="danger" @click="batchDownload()">批量下载</el-button>
            </el-for-item>

        </el-form>


        <el-table ref="autoInfoTable" id="tableInfo" :data="tableData" style="width: 100%" border
                  :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row fit>
                  <el-table-column type="selection"></el-table-column>
                  <el-table-column prop="bloodId" label="血液编号"  align="center">
                <template slot-scope="scope">
                    <el-button type="text"  @click="viewInfo(scope.row)">{{ scope.row.bloodId }}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="patientIdcard" label="身份证号" width="180" align="center"></el-table-column>
            <el-table-column prop="bloodComponent" label="血液成分" align="center">
                <template slot-scope="scope">
                    {{ getBloodComponentName(scope.row.bloodComponent) }}
                </template>
            </el-table-column>
            <el-table-column prop="bloodCount" label="血量" align="center">
                <template slot-scope="scope">
                    {{ getBloodSizeName(scope.row.bloodCount) }}
                </template>
            </el-table-column>
            <el-table-column prop="aboBloodType" label="ABO血型"  align="center">
                <template slot-scope="scope">
                    {{ getAboBloodName(scope.row.aboBloodType) }}
                </template>
            </el-table-column>
            <el-table-column prop="rhBloodType" label="RH血型" align="center">
                <template slot-scope="scope">
                    {{ getRhBloodName(scope.row.rhBloodType) }}
                </template>
            </el-table-column>
            <el-table-column prop="collectTime" label="采集时间" width="200" align="center">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    {{ scope.row.collectTime }}
                </template>
            </el-table-column>
            <el-table-column prop="failureTime" label="失效时间" width="200" align="center">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    {{ scope.row.failureTime }}
                </template>
            </el-table-column>
            <el-table-column prop="state" label="状态"  align="center">
                <template slot-scope="scope">
                    {{ getStateName(scope.row.state) }}
                </template>
            </el-table-column>
            <el-table-column prop="bloodLocation" label="血袋位置"  align="center">
                <template slot-scope="scope">
                    {{ getBloodLocationName(scope.row.bloodLocation) }}
                </template>
            </el-table-column>
        </el-table>




        <!--分页组件-->
        <div class="pagination-container">
            <el-pagination
                    class="pagiantion"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-sizes="[5,10,15]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total"
                    style="text-align: center; margin-top: 20px;">
            </el-pagination>
        </div>

        <el-dialog title="血液详细信息" center :visible.sync="dialogDetailVisible" width="60%">
            <el-descriptions :content-style="rowCenter" :label-style="rowCenter" class="margin-top" :column="2"  border>
                    <el-descriptions-item>
                        <template slot="label" align="center" >
                        血液编号
                        </template>
                        {{ detailDes.bloodId }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            血装编号条码
                        </template>
                        {{ detailDes.barcode }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                身份证号
                            </template>
                            {{ detailDes.patientIdcard }}
                            </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label" align="center" >
                            ABO血型
                            </template>
                            {{ detailDes.aboBloodType }}
                          </el-descriptions-item>
                          <el-descriptions-item>
                            <template slot="label" align="center" >
                              RH血型
                            </template>
                            {{ detailDes.rhBloodType }}
                          </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label" align="center" >
                          血液成分
                        </template>
                        {{ detailDes.bloodComponent }}
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          状态
                        </template>
                        {{ detailDes.state }}
                      </el-descriptions-item>
                          <el-descriptions-item>
                            <template slot="label">
                              血量
                            </template>
                            {{ detailDes.bloodCount }}
                          </el-descriptions-item>
                          <el-descriptions-item>
                            <template slot="label" align="center" >
                              计量单位
                            </template>
                            {{ detailDes.measurementUnit }}
                          </el-descriptions-item>
                          <el-descriptions-item>
                              <template slot="label">
                                血液位置
                              </template>
                              {{ detailDes.bloodLocation }}
                            </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label" align="center" >
                                  扩展码
                                </template>
                                {{ detailDes.extendCode }}
                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label" align="center" >
                                  批次号
                                </template>
                                {{ detailDes.batchNumber }}
                              </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label" align="center" >
                                失效时间
                                </template>
                                {{ detailDes.failureTime }}
                              </el-descriptions-item>
                              <el-descriptions-item>
                                <template slot="label" align="center" >
                                  采集时间
                                </template>
                                {{ detailDes.collectTime }}
                              </el-descriptions-item>
                  </el-descriptions>
        </el-dialog>

    </template>

</div>

<script src="/js/vue.min.js"></script>
<script src = "/js/2.15.12/index.js"></script>
<link href = "/css/2.15.12/index.css" rel="stylesheet">
<script src="/plugins/axios-0.27.2/axios.min.js"></script>
<script src="/icons/iconfont.js"></script>
<script src="/js/httpVueLoader.js"></script>


<script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>

<script>
    (
        function () {
            new Vue({
                el: '.data-manage-table',
                data() {
                    return {
                    // 描述列表文字居中
                    rowCenter:{
                        "text-align":"center"
                    },

                        //血液状态列表
                        stateList : [],

                        //ABO血型列表
                        aboBloodTypeList : [],

                        //Rh血型列表
                        rhBloodTypeList : [],

                        //血液成分列表
                        bloodComponentList : [],

                        // 血量列表
                        bloodSizeList : [],

                        //血液位置列表
                        bloodLocationList : [],


                        //分页相关信息
                        pagination: {
                            currentPage: 1, //当前页码
                            pageSize: 5, //每页显示记录数
                            total: 0, //总记录数
                            //查询条件
                            bloodId: '',  //血液编号
                            patientIdcard : '', //病人身份证号
                            state: '',  //血液状态
                            aboBloodType: '',   //abo血型
                            rhBloodType: '',    //rh血型
                            dateVal: '',       //日期范围
                            bloodComponent: '', //血液成分
                            bloodCount: '', //血量
                            bloodLocation : '', //血袋位置
                        },

                        //表格信息
                        tableData: [],

                        //血液详细信息描述列表开关
                        dialogDetailVisible : false,

                        // 血液信息描述列表
                        detailDes : '',

                        // 新增表单显示
                        changeFormVisible: false,

                        // 编辑数据的唯一索引
                        bloodNumIndex: '',

                    }
                },

                //自动触发写入的函数
                created() {
                    this.getByQueryPage();
                },


                mounted() {
                    this.getBloodSize();
                    this.getBloodLocation();
                    this.getState();
                    this.getAboBloodType();
                    this.getRhBloodType();
                    this.getBloodComponent();
                },

                methods: {
                    selectBlur(e){
                        if (e.target.value !== ''){
                            this.pagination.state = e.target.value;
                            this.$forceUpdate() //强制更新
                        }
                    },

                    // 清空状态
                    selectClearState(){
                        this.pagination.state = ''
                        this.$forceUpdate();
                    },

                    // 输入状态
                    selectChangeState(val){
                        this.pagination.state = val
                        this.$forceUpdate();
                    },

                    // 清空血液成分
                    selectClearComponent(){
                        this.pagination.bloodComponent = ''
                        this.$forceUpdate();
                    },

                    // 输入血液成分
                    selectChangeComponent(val){
                        this.pagination.bloodComponent = val
                        this.$forceUpdate();
                    },

                    //批量下载
                    batchDownload() {
                        if(JSON.parse(JSON.stringify(this.$refs.autoInfoTable.selection)).length==0){
                            this.$notify({
                                title: '温馨提示：',
                                message: '您未选中数据，请重新操作！！！' ,
                                type: 'warning'
                            });
                            return;
                        }
                        let checkArr = JSON.parse(JSON.stringify(this.$refs.autoInfoTable.selection));  // 存储了勾选到的数据
                        var ids=new Array()
                        for(var i=0;i<checkArr.length;i++){
                            ids[i]=checkArr[i].id;
                        }
                        console.log("下载所选编号")
                        console.log(ids)
                        // let data={ids:ids}
                        //批量下载
                        this.$confirm('确定下载这些数据吗, 是否继续?', '批量打印', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            const a = document.createElement('a')
                            a.href = '/autologousBlood/normal/batchDownload?' + 'ids='+ ids
                            console.log(a.href)
                            a.click()
                        });
                    },

                    viewInfo(row){
                        this.detailDes = row;
                        this.detailDes.bloodComponent = this.getBloodComponentName(row.bloodComponent);
                        this.detailDes.bloodCount = this.getBloodSizeName(row.bloodCount);
                        this.detailDes.aboBloodType = this.getAboBloodName(row.aboBloodType);
                        this.detailDes.rhBloodType = this.getRhBloodName(row.rhBloodType);
                        this.detailDes.state = this.getStateName(row.state);
                        this.detailDes.bloodLocation = this.getBloodLocationName(row.bloodLocation);
                        this.dialogDetailVisible = true;
                    },
                    //分页查询
                    getByQueryPage: function (flag) {
                        //用于重置搜索条件
                        if (flag != 1) {
                            this.pagination.patientIdcard = '';
                            this.pagination.state = '';
                            this.pagination.aboBloodType = '';
                            this.pagination.rhBloodType = '';
                            this.pagination.startTime = '';
                            this.pagination.endTime = '';
                            this.pagination.dateVal = '';
                            this.pagination.startTime = '';
                            this.pagination.endTime = '';
                            this.pagination.bloodComponent = '';
                            this.pagination.bloodCount = '',
                            this.pagination.bloodLocation = '',
                            this.pagination.currentPage = 1;
                        }
                        axios.get('/autologousBlood/normal/' + this.pagination.currentPage + '/' + this.pagination.pageSize,
                            {
                                params: {
                                    patientIdcard: this.pagination.patientIdcard,
                                    bloodId: this.pagination.bloodId,
                                    state: this.pagination.state,
                                    aboBloodType: this.pagination.aboBloodType,
                                    rhBloodType: this.pagination.rhBloodType,
                                    bloodComponent: this.pagination.bloodComponent,
                                    bloodCount : this.pagination.bloodCount,
                                    bloodLocation : this.pagination.bloodLocation,
                                    collectTime: this.pagination.startTime,
                                    failureTime: this.pagination.endTime,
                                }
                            }).then((res) => {
                            console.log(res.data);
                            if (res.data.code === "200") {
                                this.pagination.pageSize = res.data.data.size;
                                this.pagination.currentPage = res.data.data.current;
                                this.pagination.total = res.data.data.total;
                                this.tableData = res.data.data.records;
                            } else {
                                this.$message.success("查询失败");
                            }
                        });
                    },
                    
                    // 获取状态字典
                    getState(){
                        axios.get('/state/normal/getName')
                        .then((res)=>{
                            if (res.data.code === '200'){
                                this.stateList = res.data.data
                            } else {
                                this.$notify.error({
                                    title : '错误',
                                    message : '获取数据失败'
                                })
                            }
                        })
                    },

                // 将表格中的State字段的code转换成name
                getStateName(code){
                    for (var i=0;i<this.stateList.length;i++){
                        if (this.stateList[i].code == code){
                            return this.stateList[i].state
                        }
                    }
                },

                // 获取血液位置字典
                getBloodLocation(){
                        axios.get('/bloodLocation/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.bloodLocationList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },
                    // 将表格中bloodLocation字段的code转换成name
                    getBloodLocationName(code){
                        for (var i = 0; i < this.bloodLocationList.length; i++) {
                            if (this.bloodLocationList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.bloodLocationList[i].location;
                            }
                        }
                    },


                   // 获取血量字典
                   getBloodSize(){
                    axios.get('/bloodSize/normal/getName1')
                        .then((res)=>{
                            if (res.data.code === '200') {
                                this.bloodSizeList = res.data.data
                            } else {
                                this.$notify.error({
                                    title: '错误',
                                    message: '获取数据失败',
                                })
                            }
                        })
                    },
                
                    // 将表格中bloodCount字段的code转换成size
                    getBloodSizeName(code){
                        for (var i = 0; i < this.bloodSizeList.length; i++) {
                            if (this.bloodSizeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.bloodSizeList[i].size;
                            }
                        }
                    },

                // 获取abo血型字典
                getAboBloodType(){
                    axios.get('/aboType/normal/getName')
                        .then((res)=>{
                            if (res.data.code === '200') {
                                this.aboBloodTypeList = res.data.data
                            } else {
                                this.$notify.error({
                                    title: '错误',
                                    message: '获取数据失败',
                                })
                            }
                        })
                },
                
                // 将表格中aboBloodType字段的code转换成name
                getAboBloodName(code){
                    for (var i = 0; i < this.aboBloodTypeList.length; i++) {
                        if (this.aboBloodTypeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                            return this.aboBloodTypeList[i].name;
                        }
                    }
                },

                 // 获取rh血型字典
                 getRhBloodType(){
                    axios.get('/rhType/normal/getName')
                        .then((res)=>{
                            if (res.data.code === '200') {
                                this.rhBloodTypeList = res.data.data
                            } else {
                                this.$notify.error({
                                    title: '错误',
                                    message: '获取数据失败',
                                })
                            }
                        })
                },
                
                // 将表格中rhType字段的code转换成name
                getRhBloodName(code){
                    for (var i = 0; i < this.rhBloodTypeList.length; i++) {
                        if (this.rhBloodTypeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                            return this.rhBloodTypeList[i].name;
                        }
                    }
                },
                
                // 获取血液成分字典
                getBloodComponent(){
                    axios.get('/bloodComposition/normal/getName')
                        .then((res)=>{
                            if (res.data.code === '200') {
                                this.bloodComponentList = res.data.data
                            } else {
                                this.$notify.error({
                                    title: '错误',
                                    message: '获取数据失败',
                                })
                            }
                        })
                },
                             
                // 将表格中bloodComponent字段的code转换成name
                getBloodComponentName(code){
                    for (var i = 0; i < this.bloodComponentList.length; i++) {
                        if (this.bloodComponentList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                            return this.bloodComponentList[i].composition;
                        }
                    }
                },

                // 获取时间
                dateFormat(picker) {
                    this.pagination.startTime = picker[0].getFullYear() + '-' + this.handleTimeStr(picker[0].getMonth() + 1) + '-' + this.handleTimeStr(picker[0].getDate()) + ' 00:00:00';
                    this.pagination.endTime = picker[1].getFullYear() + '-' + this.handleTimeStr(picker[1].getMonth() + 1) + '-' + this.handleTimeStr(picker[1].getDate()) + ' 00:00:00';
                },

                // 分页查询 每页显示多少条数据
                handleSizeChange: function (pageSize) {
                    this.pagination.pageSize = pageSize;
                    this.getByQueryPage(1);
                },

                //分页查询 切换页码
                handleCurrentChange: function (currentPage) {
                    this.pagination.currentPage = currentPage;
                    //执行查询
                    this.getByQueryPage(1);
                },

                // 时间标准化
                handleTimeStr(tStr) {  // 解决 10:2:2 出现各位数字格式化为 10:02:02
                    if (tStr < 10) {
                        return '0' + tStr
                    } else {
                        return tStr
                    }
                },
                }
            });
        })()
</script>

</body>
</html>